<template>
  <div class="apply_parking_place">
    <van-nav-bar
      title="车位申请"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="apply_content">
      <van-tabs v-model="activeName" title-active-color="#DC4630">
        <van-tab title="车位租赁" name="borrow">
          <div class="repair_info">
            <van-field
              v-model="form.address"
              label="社区"
              placeholder="请选择社区"
              clearable
              readonly
              clickable
              @click="showPicker = true"
              right-icon="arrow"
              required
            />
            <van-field
              v-model="form.phone"
              type="number"
              label="联系电话"
              placeholder="请输入联系电话"
              clearable
              maxlength="15"
              class="repair_input_box"
              required
            />
            <van-field
              v-model="form.emergencyPhone"
              type="number"
              label="紧急电话"
              placeholder="请输入紧急电话"
              clearable
              maxlength="15"
              class="repair_input_box"
              required
            />
            <van-field
              v-model="form.vehicleNo"
              label="车牌号码"
              placeholder="请输入车牌号码"
              clearable
              class="repair_input_box"
              required
            />
            <van-field
              v-model="form.years"
              label="租赁年限"
              placeholder="请选择租赁年限"
              clearable
              readonly
              clickable
              @click="yearsPicker = true"
              right-icon="arrow"
              required
            />
            <van-field
              v-model="form.vehicleColor"
              label="车辆颜色"
              placeholder="请输入车辆颜色"
              clearable
              class="repair_input_box"
              required
            />
            <van-field
              v-model="form.vehicleBrand"
              label="车辆品牌"
              placeholder="请输入车辆品牌"
              clearable
              class="repair_input_box"
              required
            />
            <van-field
              v-model="form.isPayment"
              label="是否缴费"
              placeholder="请选择是否缴费"
              clearable
              readonly
              clickable
              @click="isPayPicker = true"
              right-icon="arrow"
              required
            />
          </div>
          <van-button
            class="next_btn apply_btn"
            @click="submit()"
            :disabled="!disabled"
            >提交申请
          </van-button>
        </van-tab>
        <van-tab title="车位购买" name="buy">
          <div class="repair_info">
            <van-field
              v-model="formBuy.address"
              label="社区"
              placeholder="请选择社区"
              clearable
              readonly
              clickable
              @click="showPicker = true"
              right-icon="arrow"
              required
            />
            <van-field
              v-model="formBuy.phone"
              type="number"
              label="联系电话"
              placeholder="请输入联系电话"
              clearable
              maxlength="15"
              class="repair_input_box"
              required
            />
            <van-field
              v-model="formBuy.emergencyPhone"
              type="number"
              label="紧急电话"
              placeholder="请输入紧急电话"
              clearable
              maxlength="15"
              class="repair_input_box"
              required
            />
            <van-field
              v-model="formBuy.isPayment"
              label="是否缴费"
              placeholder="请选择是否缴费"
              clearable
              readonly
              clickable
              @click="isPayPicker = true"
              right-icon="arrow"
              required
            />
          </div>
          <van-button
            class="next_btn apply_btn"
            @click="submitBuy()"
            :disabled="!disabledBuy"
            >提交申请
          </van-button>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="yearsPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="yearsColumns"
        @cancel="yearsPicker = false"
        @confirm="yearsConfirm"
      />
    </van-popup>
    <van-popup v-model="isPayPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="payColumns"
        @cancel="isPayPicker = false"
        @confirm="payConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { validatePhoneNum } from "@/utils/validate";
import { notEmpty } from "../emptyTest";
import houseService from "@/controller/myhouse.js";
import constant from "@/controller/constant.js";
export default {
  name: "applyParkingPlace",
  data() {
    return {
      activeName: "borrow",
      form: {
        address: "",
        phone: "",
        emergencyPhone: "",
        years: "",
        vehicleNo: "",
        vehicleColor: "",
        vehicleBrand: "",
        isPayment: ""
      },
      formBuy: {
        address: "",
        phone: "",
        emergencyPhone: "",
        isPayment: ""
      },
      showPicker: false,
      yearsPicker: false,
      isPayPicker: false,
      columns: [],
      yearsColumns: [],
      payColumns: [
        {
          value: 0,
          text: '否'
        },
        {
          value: 1,
          text: '是'
        }
      ]
    };
  },
  computed: {
    disabled: function() {
      return (
        notEmpty(this.form.address) &&
        notEmpty(this.form.phone) &&
        notEmpty(this.form.emergencyPhone) &&
        notEmpty(this.form.years) &&
        notEmpty(this.form.vehicleNo) &&
        notEmpty(this.form.vehicleColor) &&
        notEmpty(this.form.vehicleBrand) &&
        notEmpty(this.form.isPayment)
      );
    },
    disabledBuy: function() {
      return (
        notEmpty(this.formBuy.address) &&
        notEmpty(this.formBuy.phone) &&
        notEmpty(this.formBuy.emergencyPhone) &&
        notEmpty(this.formBuy.isPayment)
      );
    }
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
    this.getBoundHouseList(this.userId);
  },
  methods: {
    getBoundHouseList(id) {
      houseService.community_user_house_user(id).then(res => {
        if (res.code === "0") {
          if (!res.datas.length) {
            this.$toast("暂无绑定房屋");
            return;
          }
          this.columns = [];
          res.datas.forEach(e => {
            this.columns.push({
              value: {
                neighborhoodId: e.neighborhoodId,
                houseId: e.houseId
              },
              text: e.neighborhoodName
            });
          });
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    submit() {
      if (
        !validatePhoneNum(this.form.phone) ||
        !validatePhoneNum(this.form.emergencyPhone)
      ) {
        this.$toast("请输入合法电话号码");
        return;
      }
      this.$router.go(-1);
      this.$toast("提交成功");
    },
    submitBuy() {
      if (
        !validatePhoneNum(this.formBuy.phone) ||
        !validatePhoneNum(this.formBuy.emergencyPhone)
      ) {
        this.$toast("请输入合法电话号码");
        return;
      }
      this.$router.go(-1);
      this.$toast("提交成功");
    },
    onConfirm(val) {
      this.showPicker = false;
      if (this.activeName == "borrow") {
        this.form.address = val.text;
      } else {
        this.formBuy.address = val.text;
      }
    },
    yearsConfirm(val) {
      this.yearsPicker = false;
      this.form.years = val.text;
    },
    payConfirm(val) {
      this.isPayPicker = false;
      if (this.activeName == "borrow") {
        this.form.isPayment = val.text;
      } else {
        this.formBuy.isPayment = val.text;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.apply_parking_place {
  background: #ffffff;
  height: 100%;
  .apply_content {
    .repair_info {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>

<style lang="scss">
.apply_content {
  .van-tabs__line {
    background-color: #dc4630;
    width: 187.5px !important;
    height: 2px;
  }

  .van-ellipsis {
    font-size: 14px;
  }

  .van-cell {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 15px;
  }

  .van-cell:first-child {
    padding-top: 15px;
  }

  .van-field__control {
    text-align: right;
    font-size: 14px;
  }

  .repair_input_box {
    .van-field__control {
      margin-right: 24px;
    }
  }
}
</style>
